
<html>
		<head>
		  <title>科技助老信息服务监控平台</title>
		  <meta charset="utf-8">
		  <meta http-equiv="pragma" content="no-cache">
		  <meta http-equiv="cache-control" content="no-cache">
		  <meta http-equiv="expires" content="0">    
		  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		  <meta http-equiv="description" content="This is my page">
		  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">	
		  <link rel="stylesheet" type="text/css" href="../css5/css2.css"/>
		  
		  <style>
			  @media screen and (max-width: 1440px) {
	  
				  html,
				  body {
					  font-size: 12px;
				  }
				  }
	  
				  @media screen and (min-width: 1441px) and (max-width: 1680px) {
	  
				  html,
				  body {
					  font-size: 13px;
				  }
				  }
				  
	  
				  @media screen and (min-width: 1681px) and (max-width: 1919px) {
	  
				  html,
				  body {
					  font-size: 16px;
				  }
				  } 
				  /* @media screen and (min-width: 1670px) and (max-width: 1690px) {
	  
				  html,
				  body {
					  font-size: 14.03px;
				  }
				  }  */
	  
				  @media screen and (min-width: 1910px) and (max-width: 1930px) {
	  
				  html,
				  body {
					  font-size: 16px;
				  }
				  }
				  @media screen and (min-width: 1590px) and (max-width: 1610px) {
	  
				  html,
				  body {
					  font-size: 13.3px;
				  }
				  }
	  
				  /* @media screen and (min-width: 2830px) and (max-width: 2850px) {
	  
				  html,
				  body {
					  font-size: 23.7px;
				  }
				  }
	  
				  @media screen and (min-width: 3830px) and (max-width: 3850px) {
	  
				  html,
				  body {
					  font-size: 32px;
				  }
			  } */
	  
			  .block {
				  position: absolute;
				  left: 45%;
				  top: 15%;
			  }
			  .el-input--suffix .el-input__inner {
				  padding-right: 0;
			  }
			  .el-date-editor.el-input, .el-date-editor.el-input__inner {
				  width: 7.5rem;
			  }
			  .el-input__inner {
				  -webkit-appearance: none;
				  background-color: #FFF;
				  background-image: none;
				  background: #3366FF;
				  /* border: 1px solid #DCDFE6; */
				  -webkit-box-sizing: border-box;
				  box-sizing: border-box;
				  color: #fff;
				  border: none;
				  display: inline-block;
				  font-size: inherit;
				  height: 1rem;
				  line-height: 1rem;
				  outline: 0;
				  padding: 0 .94rem;
				  -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
				  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
				  width: 100%;
				  border-radius: .625rem;
				  font-size: 12px;
			  }
			  .el-input__prefix, .el-input__suffix {
				  position: absolute;
				  top: -.75rem;
				  -webkit-transition: all .3s;
				  height: 100%;
				  color: #fff;
				  /* color: #C0C4CC; */
				  text-align: center;
				  font-size: .2rem;
			  }
			  .el-date-editor .el-icon-circle-close {
				  cursor: pointer;
				  position: absolute;
				  left: -.75rem;
			  }
			  .el-input__icon {
				  height: 100%;
				  width: 1.56rem;
				  text-align: center;
				  -webkit-transition: all .3s;
				  transition: all .3s;
				  line-height: 2.5rem;
				  font-size: 12px;
			  }
			  /* .table-container {
				  width: 100%;
				  height: 90px;
				  overflow: scroll;
			  } */
			  /* .table-container {
				  height: 19%;
				  overflow: auto;
				  overflow-x: hidden;
			  } */
			  .table-lists {
				  margin-top: 1.3rem;
				  color: #fff;
				  font-size: .5rem;
				  margin-left: 0.125rem;
				  border-right: .08rem solid #0D168C;
				  width: 100%;
				  height: 25rem;
				  font-size: .9rem;
			  }
			  .main {
				/*   position: absolute;
				  right: 4%;
				  top: 10%; */
				  margin-top: -2.125rem;
				  width: 100%;
				  height: 50%;
				  /* height: 100%; */
				  /*width: 14.5rem;*/
				  /* height: 30.5rem; */
				  /*height: 50rem;*/
			  }
			  .app {
				  height: 100%;
				  display: flex;
				  flex-direction: column;
			  }
			  /* .el-carousel__indicator {
				  display: none;
				  background-color: transparent;
				  padding: 12px 4px;
				  cursor: pointer;
			  } */
			  .fade-enter-active, .fade-leave-active {
				  transition:  all 1s;
			  }
			  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
				  opacity: 0;
			  }
			  .fades-enter-active, .fades-leave-active {
				  transition: all 1s;
			  }
			  .fades-enter, .fades-leave-to /* .fade-leave-active below version 2.1.8 */ {
				  opacity: 0;
			  }
			  .fadess-enter-active, .fadess-leave-active {
				  transition: all 1s;
			  }
			  .fadess-enter, .fadess-leave-to /* .fade-leave-active below version 2.1.8 */ {
				  opacity: 0;
			  }
			  .fadesss-enter-active, .fadesss-leave-active {
				  transition: all 1s;
			  }
			  .fadesss-enter, .fadesss-leave-to /* .fade-leave-active below version 2.1.8 */ {
				  opacity: 0;
			  }
			  .fadessss-enter-active, .fadesss-leave-active {
                 transition: all 1s;
             }
             .fadessss-enter, .fadesss-leave-to /* .fade-leave-active below version 2.1.8 */ {
                 opacity: 0;
             }
			  li {
				  text-align: center;
				  /* margin-bottom: 20px; */
				  height: 60px;
			  }
		  
			  
		  </style>
		  
		</head>
		
		<body >
		  
		  <div class="app" id="app">
			  <div class="showPage" v-show="showPage">
					  <div class="jkpt-t-box">
							  <div class="time-all">
								  <div class="time">{{time}}</div>
								  <div class="time-img"></div>
								  <div class="year-all">
									  <div class="year">{{years}}</div>
									  <div class="week">{{week}}</div>
								  </div>
							  </div>
						  </div>
						  <div class="header">
							  <div class="all-1">
								  <div class="img-1"></div>
								  <div class="container-1">
									  <span class="fuwurenshu">服务人数</span>
									  <span class="count-1">{{fuwurenshu}}</s>
								  </div>
							  </div>
							  
							  <div class="all-1">
								  <div class="img-2"></div>
								  <div class="container-1">
									  <span class="fuwurenshu">今日回访</span>
									  <span class="count-1">{{jinrihuifang}}</s>
								  </div>
							  </div>
							  <div class="all-1">
								  <div class="img-3"></div>
								  <div class="container-1">
									  <span class="fuwurenshu">今日接听</span>
									  <span class="count-1">{{jinrijieting}}</s>
								  </div>
							  </div>
							  <div class="all-1">
								  <div class="img-4"></div>
								  <div class="container-1">
									  <span class="fuwurenshu">今日电话</span>
									  <span class="count-1">{{jinridianhua}}</s>
								  </div>
							  </div>
							  <div class="all-1">
								  <div class="img-5"></div>
								  <div class="container-1">
									  <span class="fuwurenshu">今日点餐</span>
									  <span class="count-1">{{jinridingcan}}</s>
								  </div>
							  </div>
							  <div class="all-1-1">
								  <div class="img-6"></div>
								  <div class="container-1">
									  <span class="fuwurenshu">老人总数</span>
									  <span class="count-1">{{laorenzongshu}}</s>
								  </div>
							  </div>
						  </div>
				  
				  
						  <div class="center">
							  <div class="left">
								  <div class="button-container">
									  <div @click="yijians" class="button-1">
										  <span class="count-2">{{yijian}}</span>
										  <span class="qingkuang">已建</span>
									  </div>
									  <div  class="button-2">
										  <span class="count-2">{{daijian}}</span>
										  <span class="qingkuang">代建</span>
									  </div>
									  <div class="button-3">
										  <span class="count-2">{{weijian}}</span>
										  <span class="qingkuang">未建</span>
									  </div>
								  </div>
								  <div v-show="shows"  class="left-img">
									  <div class="header-img">
											  浦东新区科技助老展示区域
									  </div>
									 <!--  <div class="map-img"></div>	 -->
									  <!-- <div class="map-container">
										  <div><img class="fengxian" src="../img/fengxian.png" alt=""></div>
										  <template  v-for="items in address" >
										  <img :class="items.classname" :src="items.imgsrc" >
									  </template>
									  </div> -->
									   <div class="map-container">
										  <!-- <div><img class="fengxian" src="../img/fengxian.png" alt=""></div> -->
										  <template v-for="(items,index) in address" >
                                         <img ref="maps" @mouseenter="mapEnter(items.name,index)" @click="clickMap(items.name,index)" :class="items.classname" :src="items.imgsrc" >
									  </template>
									  </div>
									  
									  
									  
								  </div>
								  <div v-show="show" class="left-container">
									  <div class="left-imgs">
										  <!-- <div class="left-imgsss-container"> -->
											  <div class="left-imgsss">
												  各街区主动关怀服务统计数据
											  </div>
										  <!-- </div> -->
										  <div class="ri-container">
											  <span ref="ri" @click="riClick" class="ri">日</span>
											  <span ref="yue" @click="yueClick" class="yue">月</span>
											  <span ref="nian" @click="nianClick" class="nian">年</span>
										  </div>
										  <div id="leftOne" class="leftOne"></div>
										  <div @click="back" class="return-map"></div>
									  </div>
									  <div class="left-imgss">
										  <div class="left-imgssss">
											  各街区主动关怀服务统计数据
										  </div>
										  <div class="ri-container2">
											  <span ref="ri2" @click="riClick2" class="ri2">日</span>
											  <span ref="yue2" @click="yueClick2" class="yue2">月</span>
											  <span ref="nian2" @click="nianClick2" class="nian2">年</span>
										  </div>
										  <div id="leftTwo" class="leftOne"></div>
									  </div>
								  </div>
							  </div>
							  <div class="center-2">
								  <div class="center-img">
									  <iframe src="/kjzl/pages/mapShow/lrjfb3.jsp" style="position: absolute; top: -9px;margin-left: 12px;" width="96%" height="540px" margin-left='2%' scrolling="no" frameborder="0"></iframe> 
								  </div>
								  <div class="center-img2">
									  <div class="center-img3">
										  工单处理统计
										  <div class="block">
											  <el-date-picker
												  v-model="value1"
												  type="date"
												  placeholder="选择日期">
											  </el-date-picker>
										  </div>
									  </div>
									  <div class="table-container" style="height: 16rem; overflow: auto; width: 100%;">
											  <table border=0 cellpadding="0" cellspacing="0"  class="table-list"  >
												  <tbody>
													  <thead>
														  <tr class=" trs">
															  <td class="td tdd">
																  老人姓名
															  </td>
															  <td class="td">
																  业务分类
															  </td>
															  <td class="td">
																  服务员/加盟商
															  </td>
															  <td class="td">
																  工单生成时间
															  </td>
															  <td class="tds">
																  服务地址
															  </td>
														  </tr>
													  </thead>
													  <tr @click="showWindows(index)" v-for="(item,index) of listGDLB" :key="index" class="tr">
														  <td class="td tdd">
															  {{item.xm}}
														  </td>
														  <td class="td">
															  主动救助
														  </td>
														  <td class="td">
															  {{item.fwdwmc}}
														  </td>
														  <td class="td">
															  {{value}}
														  </td>
														  <td class="tds">
															  {{item.jtdz}}
														  </td>
													  </tr>
													  
													   <!-- <tr  @click="showWindows" class="tr">
														  <td class="td tdd">
															  上官画国
														  </td>
														  <td class="td">
															  紧急救助
														  </td>
														  <td class="td">
															  朱会东
														  </td>
														  <td class="td">
															  {{value}}
														  </td>
														  <td class="tds">
															  浦东新区松林路688弄20号六层
														  </td>
													  </tr> -->
												  </tbody>	
											  </table>
										  </div>
								  </div>
								  <div class="center-img4">
									  <div class="center-img5">
										  电子围栏出入信息
									  </div>
									  <div style="margin-top: 15px;height: 60px"  id="scrollBox">
											<ul id="con1">
													
													
											</ul>
											<ul id="con2">
													
											</ul>
									  </div>
								  </div>
							  </div>
							  <div class="right2">
								  <div class="right-img">
									  <div class="right-img3">
										  36条街镇老人情况
									  </div>
									  
									  <div class="tableList2-container" style="height: 44rem;flex: 1;margin-right: 10px; overflow: auto; width: 14.5rem; overflow-x: hidden; margin-top: 1rem;">
									  <table style="overflow-y: auto;" border=0 cellpadding="0" cellspacing="0"  class="table-lists"  >
											  <thead>
												  <tr class="trsss">
													  <td width="40%" class="tdss">
														  街镇
													  </td>
													  <td width="40%" class="tdss">
														  老人总数
													  </td>
													  <td width="20%" class="tdss">
														  占比
													  </td>
												  </tr>
											  </thead>
											  <tbody style="overflow-y: scroll;">
												  <tr @click="tableList2Click(index)"  v-for="(item,index) of listJDLR" :key="index" class="trss">
													  <td ref="tableList2" class="tdss">
														  {{item.jzname}}
													  </td>
													  <td class="tdss">
														  {{item.oldercount}}
													  </td>
													  <td class="tdss">
														  {{item.proportion}}
													  </td>
												  </tr>
											  </tbody>	
										  </table>
									  </div>
									  <div class="huan">
										  <div class="right-img5">{{place}}</div>
										  <div class="main" id="main" ></div>
									  </div>
									  <div @click="returnBack" v-show="showss" class="left-img5"></div>
								  </div>
								  <div class="right-img2">
									  <div class="right-img4">主动求助服务统计</div>
									  <div class="ri-container2">
										  <span ref="ri3" @click="riClick3" class="ri3">日</span>
										  <span ref="yue3" @click="yueClick3" class="yue3">月</span>
										  <span ref="nian3" @click="nianClick3" class="nian3">年</span>
									  </div>
									  <div id="chartmain" class="chartmain"></div>
								  </div>
							  </div>
						  </div>
						  <div v-show="showWindow" class="simaltBoxs3">
							  <div class="tctitle">工单处理详情
								  <a @click="guanbi"></a>
							  </div>
							  <h1 class="tit-msg-gd" style="margin-top:0px;">
								  基本信息
							  </h1>
							  <div class="tab-div-box">
								  <div class="tab-div-box-t">
									  <img src="../images/tleft.png">
								  </div>
								  <table  class="ects-tab" width="97%" border="1">
									  <tbody>
										  <tr>
											  <td align="right" width="100"><label>姓名：</label></td>
											  <td width="170"><span>{{listGDXQ.xm}}</span></td><td align="right" width="100"><label>性别：</label></td>
											  <td width="170"><span>{{listGDXQ.xb}}</span></td><td align="right" width="100"><label>年龄：</label></td>
											  <td width="60"><span>87岁</span></td>
										  </tr>
										  <tr><td align="right"><label>街道：</label></td><td><span>{{listGDXQ.jd}}</span></td>
											  <td align="right"><label>居委：</label></td><td colspan="3"><span>{{listGDXQ.jw}}</span></td>
										  </tr>
										  <tr><td align="right"><label>家庭住址：</label></td>
											  <td colspan="5"><span>{{listGDXQ.jtdz}}</span></td>
										  </tr>
									  </tbody>
								  </table>
								  <div class="tab-div-box-b">
									  <img src="../images/bleft.png">
								  </div>
							  </div>
							  <h1 class="tit-msg-gd">服务信息</h1>
							  <div class="tab-div-box">
								  <div class="tab-div-box-t">
									  <img src="../images/tleft.png">
								  </div>
								  <table class="ects-tab" width="97%" border="1">
									  <tbody>
										  <tr>
											  <td align="right" width="100"><label>需求描述：</label></td>
											  <td><span>{{listGDXQ.needbewrite}}</span></td>
										  </tr>
										  <tr>
											  <td align="right"><label>服务项目：</label></td><td><span>{{listGDXQ.zdqcflx}}</span></td></tr><tr><td align="right"><label>处理简介：</label></td>
											  <td><span>{{listGDXQ.callcentersummary}}</span></td>
										  </tr>
									  </tbody>
								  </table>
							  <div class="tab-div-box-b"><img src="../images/bleft.png"></div></div></div>
			  </div>
			  <div style="background: #fff" v-show="!showPage">
				  <!-- <el-carousel :interval="10000" height="100%" width="100%">
					  <el-carousel-item v-for="item in imgList" :key="item">
							  <img width="100%" height="100%" :src="item" >
					  </el-carousel-item>
				  </el-carousel> -->
				  <transition name="fade" >
						  <img  class="image-1" v-show="showImgOne"  style="height: 100%; width: 100%" src="../images/lun1.png" >
				  </transition>
				  <transition name="fades" >
						  <img class="image-2" v-show="showImgTwo"  style="height: 100%; width: 100%" src="../images/lun2.png" >
				  </transition>	
				  <transition name="fadess">
						  <img class="image-3" v-show="showImgThree" style="height: 100%; width: 100%" src="../images/lun3.png" >
				  </transition>
				  <transition name="fadesss">
						  <img class="image-4" v-show="showImgFour" style="height: 100%; width: 100%" src="../images/lun4.png" >
				  </transition>
				  <transition name="fadessss">
                        <img class="image-4" v-show="showImgFive" style="height: 100%; width: 100%" src="../images/lun5.png" >
                </transition>   
			  </div>
			  
		  </div>
		  
		  <script src="../js5/jquery-1.7.min.js"></script>
		  <script src="../js5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		  <script src="../js5/vue.js"></script>
		  <script src="../js5/news.js" type="text/javascript" charset="utf-8"></script>
		  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
		  
		  <script type="text/javascript">
            var mytimer=null;
            clearInterval(mytimer);
            mytimer=setInterval(window.scrollUp,80);
            function scrollUp(){
                var area =document.getElementById('scrollBox');
                var con1 = document.getElementById('con1');
                if(area.scrollTop>=con1.offsetHeight){
                    area.scrollTop=0;
                }else{
                    area.scrollTop++
                }
            }
		  </script>
	  </body>
	  </html>
	  